<template>
  <div class="words-container">
    <div class="control-panel">
      <el-radio-group v-model="currentType" @change="handleTypeChange">
        <el-radio-button label="time">时间词</el-radio-button>
        <el-radio-button label="place">地点词</el-radio-button>
        <el-radio-button label="nature">自然词</el-radio-button>
      </el-radio-group>
    </div>
    <div class="words-content" ref="wordsChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'PoetryWords',
  data() {
    return {
      chart: null,
      currentType: 'time',
      wordsData: {
        time: [
          { name: '十年', value: 27989 },
          { name: '当年', value: 16545 },
          { name: '少年', value: 11892 },
          { name: '年年', value: 12456 },
          { name: '千年', value: 12283 }
        ],
        place: [
          { name: '江南', value: 22702 },
          { name: '人间', value: 29965 },
          { name: '长安', value: 13027 },
          { name: '西湖', value: 9929 },
          { name: '何处', value: 36007 }
        ],
        nature: [
          { name: '春风', value: 28755 },
          { name: '明月', value: 22935 },
          { name: '东风', value: 21205 },
          { name: '西风', value: 17329 },
          { name: '流水', value: 13724 }
        ]
      }
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    this.chart && this.chart.dispose()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.wordsChart)
      this.updateChart()
    },
    updateChart() {
      const data = this.wordsData[this.currentType]
      const option = {
        backgroundColor: 'transparent',
        title: {
          text: this.getTitle(),
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ff7b00',
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(255, 123, 0, 0.9)',
          borderColor: '#ff9e45',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '出现次数',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '60%'],
            data: data.sort((a, b) => b.value - a.value),
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}\n{c}次',
              color: '#ff7b00'
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 10,
              lineStyle: {
                color: '#ff7b00'
              }
            },
            itemStyle: {
              color: (params) => {
                const colorList = [
                  '#ff7b00', '#ff9e45', '#ffb347', '#ffd700', '#ffa500'
                ]
                return colorList[params.dataIndex]
              }
            }
          }
        ]
      }
      this.chart.setOption(option)
    },
    getTitle() {
      const titles = {
        time: '时间词汇使用频率',
        place: '地点词汇使用频率',
        nature: '自然词汇使用频率'
      }
      return titles[this.currentType]
    },
    handleTypeChange() {
      this.updateChart()
    },
    handleResize() {
      this.chart && this.chart.resize()
    }
  }
}
</script>

<style scoped>
.words-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 123, 0, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  overflow: hidden;
}

.control-panel {
  padding: 15px 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
  background-color: rgba(255, 158, 69, 0.1);
  border-bottom: 1px solid rgba(255, 158, 69, 0.2);
}

.words-content {
  flex: 1;
  width: 100%;
  height: calc(100% - 60px);
}

:deep(.el-radio-button__inner) {
  background-color: transparent;
  border-color: #ff7b00;
  color: #ff7b00;
}

:deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
  background-color: #ff7b00;
  border-color: #ff7b00;
  box-shadow: -1px 0 0 0 #ff7b00;
}
</style> 